<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script>
        // 如果把script标签放在head里，获取元素时，需加window 
        window.onload = function(){
            var btn = document.getElementById('btn')
            console.log(btn);
        }
    </script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin-top: 30px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            color: greenyellow;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <!-- 事件处理函数相关内容学习 -->
    <button id="btn" onclick="btnClick()">点击</button>  
    <!-- 在哪个HTML元素上发生？ button
    发生什么事件？ onlick
    程序作何处理（事件处理函数）btnClick() -->
    <!-- 点击按钮 调用 btnClick()函数 点击几次调用几次 -->
    <button>Click</button>  
    <!-- 点击就没反应 -->

    <input 
        type="text" 
        onfocus="inpFocus()"
        onblur="inpBlur(this)"
        onchange="change()"
        placeholder="请输入密码" 
    >
    <div 
        class="box"
        onclick="divClick(this)"  //将div这个结点传到函数的形参里面
        onmouseover="over()"
        onmouseout="out()"
    >hello</div>
    <script>
        // 设置div的事件处理函数
        function out(){
            console.log('div划出');
        }
        function over(){
            console.log('div划进');
        }
        var left = 0;  //在外面声明 在局部声明的话每次点击每次都被初始化为0 跟之前that.style.marginLeft = '100px'没啥区别
        function divClick(that){    //形参什么都行that可以abc也可以
            left+=100;     // 没有var重新声明 故是全局变量 每次加100 都会赋到left里面保存
            that.style.marginLeft = left+'px';
            that.style.color = 'black';
            console.log(that);
            that.className = 'box box1'  //重复的会被后面替换掉 没重复的还有
            console.log("div被点击");
        }

        // 设置文本框的事件处理函数
        function change(){
            console.log('change');
        }
        function inpBlur(that){ //文本框失去焦点
            console.log('blur');
            // var len = that.value.length;
            // if(len<8||len>16)
            if(that.value.length<8||that.value.length>16){
                alert('您输入的密码位数不对');
            }else{
                alert('输入完成');
            }
        }
        // function inpBlur(that){
        //     console.log(that.value);  //拿到输入的值
        // }
        function inpFocus(){  //文本框获得焦点
            console.log("请输入8-16位密码");
        }

        // 点击按钮事件处理函数
        function btnClick(){
            console.log('按钮被点击了')
        }

        btnClick();   //单纯的函数调用

        // script标签写在标签之后，可以不加window
        // 直接获取元素btn不用在调用window.onload事件函数 
        // 因为前面已经加载了，如果是在head里面的会没有加载btn这个元素 故值就直接为undefined了
        var btn = document.getElementById('btn')
        console.log(btn); 

        // 函数声明复习
        function hanshuming (){ //函数声明
            var numx= 100;
            console.log(numx++);  //结果是100 不是101
        }
        // console.log(numx);  //numx只是局部变量，没有num 故会报错
        
        hanshuming(); //函数调用
        // console.log(num); //也不行
        
        var num;
        function hanshuming1 (){ //函数声明
            num= 100;
            console.log(num++);  //结果是100 不是101
        }
        hanshuming1(); //函数调用
        console.log(num);

        var f = function(){
            
        }

    </script>
</body>
</html>